<template>
  <div class="patient-selection-container">
    <div class="page-header">
      <h2>诊断患者选择：夏洛兴</h2>
    </div>
    
    <div class="content-wrapper">
      <div class="action-buttons">
        <el-button type="primary" @click="handleAddAdmissionDiagnosis">增加入院诊断</el-button>
        <el-button type="primary" @click="handleAddMainDiagnosis">增加主要诊断</el-button>
        <el-button type="primary" @click="handleAddOtherDiagnosis">增加其他诊断</el-button>
      </div>
      
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="患者姓名"
          class="search-input"
        >
          <template #append>
            <el-button @click="handleSearch">
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      
      <el-table
        :data="filteredPatientList"
        stripe
        border
        style="width: 100%"
        highlight-current-row
        @row-click="handleRowClick"
      >
        <el-table-column type="index" label="#" width="60" align="center" />
        <el-table-column prop="hospitalNo" label="住院号" width="120" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="idCard" label="身份证号" min-width="200" />
        <el-table-column prop="gender" label="性别" width="80" align="center" />
        <el-table-column prop="workStatus" label="工作状态" width="120" align="center" />
        <el-table-column prop="settlementType" label="结算类别" width="120" align="center" />
        <el-table-column prop="admissionDate" label="入院时间" width="180" align="center" />
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPatients"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      
      <el-divider />
      
      <div class="patient-details">
        <h3>患者详细信息</h3>
        
        <el-descriptions :column="3" border>
          <el-descriptions-item label="住院号">{{ selectedPatient.hospitalNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ selectedPatient.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ selectedPatient.idCard || '-' }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ selectedPatient.age || '-' }} 岁</el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ selectedPatient.birthDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ selectedPatient.gender || '-' }}</el-descriptions-item>
          <el-descriptions-item label="结算类别">{{ selectedPatient.settlementType || '-' }}</el-descriptions-item>
          <el-descriptions-item label="工作状态">{{ selectedPatient.workStatus || '-' }}</el-descriptions-item>
          <el-descriptions-item label="入院时间">{{ selectedPatient.admissionDate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="家庭住址" :span="3">{{ selectedPatient.address || '沈阳市' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const selectedPatient = ref({});

// 模拟患者数据
const patientList = [
  {
    id: 1,
    hospitalNo: '1000001',
    name: '夏洛兴',
    idCard: '123123200007011234',
    age: 22,
    birthDate: '2000-06-29',
    gender: '男',
    address: '沈阳市',
    settlementType: '医保',
    workStatus: '在职',
    admissionDate: '2022-10-28 02:10:33'
  },
  {
    id: 2,
    hospitalNo: '1000002',
    name: '李竞辰',
    idCard: '123123200007011234',
    age: 25,
    birthDate: '1997-05-15',
    gender: '男',
    address: '大连市',
    settlementType: '医保',
    workStatus: '退休',
    admissionDate: '2022-10-31 03:53:03'
  },
  {
    id: 3,
    hospitalNo: '1000003',
    name: '郝建国',
    idCard: '123123200007011234',
    age: 35,
    birthDate: '1988-12-01',
    gender: '男',
    address: '锦州市',
    settlementType: '医保',
    workStatus: '在职',
    admissionDate: '2022-12-22 02:03:02'
  }
];

// 总患者数量
const totalPatients = computed(() => {
  if (!searchKeyword.value) {
    return patientList.length;
  }
  return patientList.filter(patient => 
    patient.name.includes(searchKeyword.value) || 
    patient.hospitalNo.includes(searchKeyword.value)
  ).length;
});

// 过滤后的患者列表
const filteredPatientList = computed(() => {
  if (!searchKeyword.value) {
    return patientList.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
  }
  
  const filtered = patientList.filter(patient => 
    patient.name.includes(searchKeyword.value) || 
    patient.hospitalNo.includes(searchKeyword.value)
  );
  
  return filtered.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
});

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
};

// 处理表格行点击
const handleRowClick = (row) => {
  console.log('选中患者:', row);
  selectedPatient.value = row;
};

// 处理增加入院诊断
const handleAddAdmissionDiagnosis = () => {
  if (!selectedPatient.value.id) {
    ElMessage.warning('请先选择一个患者');
    return;
  }
  
  router.push({
    path: '/hospital/admission-diagnosis',
    query: { patientId: selectedPatient.value.id }
  });
};

// 处理增加主要诊断
const handleAddMainDiagnosis = () => {
  if (!selectedPatient.value.id) {
    ElMessage.warning('请先选择一个患者');
    return;
  }
  
  router.push({
    path: '/hospital/main-diagnosis',
    query: { patientId: selectedPatient.value.id }
  });
};

// 处理增加其他诊断
const handleAddOtherDiagnosis = () => {
  if (!selectedPatient.value.id) {
    ElMessage.warning('请先选择一个患者');
    return;
  }
  
  router.push({
    path: '/hospital/other-diagnosis',
    query: { patientId: selectedPatient.value.id }
  });
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

onMounted(() => {
  console.log('患者选择组件已加载');
  
  // 默认选择第一个患者
  if (patientList.length > 0) {
    selectedPatient.value = patientList[0];
  }
});
</script>

<style scoped>
.patient-selection-container {
  padding: 20px;
  height: 100%;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.content-wrapper {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: calc(100% - 60px);
}

.action-buttons {
  margin-bottom: 20px;
}

.search-box {
  margin-bottom: 20px;
  width: 400px;
}

.pagination-container {
  margin: 20px 0;
  display: flex;
  justify-content: flex-end;
}

.patient-details {
  margin-top: 20px;
}

.patient-details h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 20px 0;
}

.el-divider {
  margin: 30px 0;
}
</style> 